<template>
    <div class="box profile-details">
        <div class="settings-menu p-0">
            <div class="profile-heading subscription-group d-flex align-items-center">
                <div class="subscription-name">
                    <h3>小张同学</h3>
                    <p>试卷名称</p>
                    <div class="active-btns">
                        <button type="button" class="btn btn-success">Active</button>
                        <button type="button" class="btn btn-danger">Expired</button>
                    </div>
                    <p>考试时间：2024-02-21 </p>
                </div>
                <div class="upgrade-now grad-border hvr-sweep-to-right">
                    <a href="pricing-plan.html" class="btn btn-primary">100</a>
                </div>
            </div>
            <div class="monthly-subscribtion comman-space border-line">
                <div class="month-plan-detail">
                    <div class="row">
                        <div class="col-md-3 d-flex">
                            <div class="d-flex m-auto">
                                <div class="plan-icons">
                                    <i class="feather-calendar"></i>
                                </div>
                                <div class="info-group">
                                    <h5>100%</h5>
                                    <p>正确率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex">
                            <div class="d-flex m-auto">
                                <div class="plan-icons">
                                    <i class="feather-credit-card"></i>
                                </div>
                                <div class="info-group">
                                    <h5>8</h5>
                                    <p>答对</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex justify-items-center">
                            <div class="d-flex m-auto">
                                <div class="plan-icons">
                                    <i class="feather-book-open"></i>
                                </div>
                                <div class="info-group">
                                    <h5>0</h5>
                                    <p>答错</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex">
                            <div class="d-flex m-auto">
                                <div class="plan-icons">
                                    <i class="feather-calendar"></i>
                                </div>
                                <div class="info-group">
                                    <h5>0</h5>
                                    <p>未答</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="page-content course-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-0 px-0">
                    <div class="card overview-sec">
                        <div class="card-body">
                            <h5 class="subs-title">试题分析</h5>

                            <div class="faq-card" v-for="i in 10">
                                <h6 class="faq-title">
                                    <a class="collapsed d-flex" data-bs-toggle="collapse" :href="'#faq' + i"
                                        aria-expanded="false">
                                        <span>第{{ i }}题 </span>
                                        <span style="margin-left:auto" class="tag">正确-错误</span>
                                    </a>
                                </h6>
                                <div :id="'faq' + i" class="collapse" style="">
                                    <div class="faq-detail">
                                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                            richardson
                                            ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                                            Food
                                            truck quinoa nesciunt laborum eiusmod.</p>
                                        <p>If several languages coalesce, the grammar of the resulting language is more
                                            simple
                                            and regular than that of the individual languages. The new common language
                                            will be
                                            more simple and regular than the existing European languages.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">

                    <div class="card tags-widget blog-widget tags-card">
                        <div class="card-header">
                            <h4 class="card-title" data-sider-select-id="936928d0-6fdf-43b8-b710-e301a6cdbfe3">题目列表
                            </h4>
                        </div>
                        <div class="card-body">
                            <ul class="tags">
                                <li v-for="i in 25" :key="i"><a href="javascript:void(0);" class="tag">{{ i }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</template>
<style>
.tags .tag {
    width: 47.5px;
    text-align: center;
}

.overview-sec h6 {
    margin-bottom: 0 !important;
}

.info-group h5 {
    font-size: 40px;
    color: #303030;
    /* font-weight: 600; */
    margin-bottom: 7px;
}
</style>
